<template>
  <div class="content">
    <h2>Home计数: {{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="popularClick">首页-流行</button>
    <button @click="hotClick">首页-热门</button>
    <button @click="singClick">首页-歌单</button>

    <div class="scroll">
      <h2>x: {{ scrollPosition.x }}</h2>
      <h2>y: {{ scrollPosition.y }}</h2>
      <h2>解构scrollX: {{ scrollX }}</h2>
      <h2>解构scrollY: {{ scrollY }}</h2>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue'
  import useCounter from '../hooks/UseCounter'
  import UseTitle from '../hooks/UseTitle'
  import useScrollPosition from '../hooks/useScrollPosition'

  export default {
    setup() {
      const title = UseTitle('Home页面')
      function popularClick() {
        title.value = '首页-流行'
        console.log(title.value)
      }
      // const popularClick = () => {
      //   title.value = '首页-流行'
      // }
      const hotClick = () => {
        title.value = '首页-热门'
        console.log(title.value)
      }
      const singClick = () => {
        title.value = '首页-歌单'
        console.log(title.value)
      }
      // 获取滚动位置
      const {scrollX, scrollY} = useScrollPosition() // 解构
      const {scrollPosition} = useScrollPosition() // 对象
      console.log(scrollX, scrollY)
      console.log(scrollPosition)
      
      const {counter, increment, decrement} = useCounter()
      return {
        counter,
        increment,
        decrement,
        popularClick,
        hotClick,
        singClick,
        title,
        scrollPosition,
        scrollX,
        scrollY
      }
    }
  }
</script>

<style scoped>
</style>